<template>
	<view class="home">
		<!-- 头部 -->
		<Header></Header>
		<!-- 轮播图 -->
		<Banner :noticeList="noticeList" :showLoading="showNoticeLoading"></Banner>
		<section class="section">
			<!-- 研学活动 -->
			<view class="activity">
				<view class="header">
					<u-tabs :list="eventTabs" @click="handleChangeTab"></u-tabs>
					<view class="more" @click="toEvent">更多研学>></view>
				</view>
				<view class="list">
					<ActivityBox :eventList="eventList" :eventType="eventTabIndex" :showLoading="showEventLoading"></ActivityBox>
				</view>
			</view>
			<!-- 研学纪实 -->
			<CommentBox :commentList="commentList" :showLoading="showCommentLoading"></CommentBox>
			<!-- 研学周边 -->
			<MerchBox :merchList="merchList" :showLoading="showMerchLoading"></MerchBox>
			<!-- 底部 -->
			<Footer></Footer>
		</section>
	</view>
</template>

<script>
	import Header from '@/components/header.vue';
	import CommentBox from '@/components/CommentBox.vue';
	import MerchBox from '@/components/MerchBox.vue';
	import Footer from '@/components/footer.vue';
	import Banner from './components/banner.vue';
	import ActivityBox from '@/components/activityBox.vue';
	import { esensitize } from '@/utils/index.js';

	export default {
		components: {
			Header,
			Banner,
			ActivityBox,
			CommentBox,
			MerchBox,
			Footer,
		},
		data() {
			return {
				eventTabIndex: 0,
				eventTabs: [{
					name: '校内必选'
				}, {
					name: '校外精选'
				}],
				eventList: [],
				commentList: [],
				merchList: [],
				noticeList: [],
				showEventLoading: true,
				showCommentLoading: true,
				showMerchLoading: true,
				showNoticeLoading: true,
			}
		},

		onLoad() {
			this.getUserInfo();
			Promise.all([this.getNoticeList(), this.getEventList(), this.getMerchList(), this.getCommentList()]).then(() => {
				
			});
		},
		
		onPullDownRefresh() {
			this.getUserInfo();
			Promise.all([this.getNoticeList(), this.getEventList(), this.getMerchList(), this.getCommentList()]).then(() => {
				
			});
			uni.stopPullDownRefresh();
		},

		methods: {
			async getUserInfo() {
				const res = await this.$api('/study/mobile/personal/center/info');
				this.userInfo = res.data;
				this.userInfo.mobileEsensitize = esensitize(this.userInfo.mobile, 3, 4);
			},
			handleChangeTab(e) {
				this.eventTabIndex = e.index;
				this.getEventList();
			},
			
			async getNoticeList() {
				const res = await this.$api('/study/notice/page', 'get', {
					page: 1,
					limit: 3,
					keywords: '',
				});
				this.showNoticeLoading = false;
				this.noticeList = res.data.list;
			},

			async getEventList() {
				const res = await this.$api('/study/mobile/event/page', 'get', {
					page: 1,
					limit: 2,
					type: this.eventTabIndex === 1 ? 'OFF_CAMPUS' : 'ON_CAMPUS'
				});
				this.showEventLoading = false;
				this.eventList = res.data.list;
			},

			async getCommentList() {
				const res = await this.$api('/study/mobile/comment/page', 'get', {
					page: 1,
					limit: 10,
				});
				this.showCommentLoading = false;
				this.commentList = res.data.list;
			},

			async getMerchList() {
				const res = await this.$api('/study/mobile/merch/page', 'get', {
					page: 1,
					limit: 10,
				});
				this.showMerchLoading = false;
				this.merchList = res.data.list;
			},
			toEvent() {
				uni.navigateTo({
					url: '/pages/study/event',
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		overflow-x: hidden;
		.section {
			padding: 32rpx;
		}

		.activity {
			.header {
				display: flex;
				align-items: center;
				flex-direction: row;
				justify-content: space-between;
			}

			.more {
				color: #D7A768;
			}

			.skeleton {
				background-color: #fff;
				padding: 20rpx;
				border-radius: 20rpx;
				margin: 20rpx 0;
			}
		}
	}
</style>